import { PropsWithChildren, SVGProps } from 'react';

import cs from './Tooltip.module.scss';

const TailIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    className={cs.bottom}
    fill="none"
    height="5"
    viewBox="0 0 13 5"
    width="13"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path d="M0.5 0H12.5L7.78037 3.93303C7.03868 4.5511 5.96132 4.5511 5.21963 3.93303L0.5 0Z" fill="black" />
  </svg>
);

export const Tooltip = ({
  text,
  children,
  isOpen,
  className,
}: { text: string; isOpen?: boolean; className?: string } & PropsWithChildren) => (
  <div className={cs.tooltip_container}>
    {isOpen && (
      <div className={cs.tooltip}>
        <div className={cs.tooltip_text}>{text}</div>
        <TailIcon />
      </div>
    )}
    <div className={className}>{children}</div>
  </div>
);
